<!DOCTYPE HTML>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <title>网页版伴奏谱</title>
        <link rel="stylesheet" href="http://oschina_xiaowen.gitee.io/web-common-style-and-script/style/common_style_classes/common_component.css"/>
        <link rel="stylesheet" href="music_sheet.css"/>
        <style>
            body {margin: 0; padding: 0}
            @media screen and (min-width: 720px) {
                body { font-size: 16px; }
            }
            .max720 { max-width: 720px;}
            .primaryTitle { margin-bottom: 20px; font-size: 150%; }
            .secondTitle { margin-bottom: 20px; font-size: 110%; font-weight: normal; }
        </style>

        <!-- highest level -->
        <link rel="stylesheet" href="http://oschina_xiaowen.gitee.io/web-common-style-and-script/style/common_style_classes/common_style_classes.css"/>
    </head>
<body class="grey_bg fullHeight" data-base-width="360" data-base-font-size="12">

<div class="page max720 white_bg">
    <div class="inner padding10">
        <article class="musicSheet" id="musicSheetControl">
            <h1 class="primaryTitle alignCenter">{{sheet ? sheet.title : ''}}</h1>
            <h2 class="secondTitle alignCenter">{{sheet ? sheet.desc : ''}}</h2>

            <p v-if="errorInfo">{{errorInfo}}</p>

            <div class="sheetArea">

                <div class="sheetLine" :data-sections="sectionPerLine"
                     v-for="sheetLine in getSectionGroup()">
                    <div class="sheetSection" v-for="section in sheetLine">
                        <div class="commentArea" v-if="section">
                            <span v-if="section.tag">
                                {{section.tag}}
                            </span>
                        </div>
                        <div class="tagArea" v-if="section">
                            <div class="beat"
                                 v-for="beat in section.sectionBeats">
                                {{beat}}
                            </div>
                        </div>
                    </div><!-- end .sheetSection -->
                </div><!-- end .sheetLine -->
            </div>

            <section class="sheetNote" v-if="sheet && sheet.note">
                {{sheet.note}}
            </section>

        </article>
    </div><!-- end .inner -->
</div><!-- end .page -->

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="http://oschina_xiaowen.gitee.io/web-common-style-and-script/script/common_script/common_function.js"></script>

<script src="http://oschina_xiaowen.gitee.io/web-common-style-and-script/script/common_script/common_action.js"></script>
<script src="music_sheet.js"></script>
</body>
</html>
